<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { ref, onMounted, computed, nextTick } from 'vue'
import { modifyEmail, addEmail } from '@/api/comprehensive'
import { getByDictType } from '@/api/common'
import { message } from 'ant-design-vue'
import { DraggableModal } from '@/components/core/draggable-modal'

const props = defineProps({
  mailEditInfo: {
    type: Object,
    required: true
  },
  showSearchPageLink: {
    // 弹框是否展示返回综合查询link
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['updateMailList', 'updateVisible'])

const labelCol = { span: 6 }
const wrapperCol = { span: 12 }
const fieldNames = { label: 'dictCName', value: 'dictCode' }
const isUpdate = computed(() => {
  return props.mailEditInfo.type === 'update'
})
const flagOptions = [
  { dictCName: '是', dictCode: '01', dictEName: '是', dictSort: 1 },
  { dictCName: '否', dictCode: '02', dictEName: '否', dictSort: 2 }
]
var validateMailAddress = async (rule, value) => {
  let mailReg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/

  if (value === '') {
    return Promise.reject('请输入邮箱')
  }
  if (!mailReg.test(value)) {
    return Promise.reject(`邮箱格式错误`)
  }
  return Promise.resolve()
}
const rules = {
  email: [{ validator: validateMailAddress, trigger: 'blur', required: true }],
  emailType: [
    {
      required: true,
      message: t('global.placeholderSelect', { value: t('home.mailModal.mailTypeCode') }),
      trigger: 'change'
    }
  ]
  // emailStatus: [{ required: true, message: '请选择有效邮箱', trigger: 'change' }]
}
let formState = ref({
  email: null,
  emailType: null,
  emailStatus: '01',
  isValid: '01',
  autoEob: '01',
  ob: '01',
  auto80: '01',
  otherMailType: '01'
})
// 获取邮箱类型列表
const mailTypeList = ref([])
async function getMailTypeList() {
  let res = await getByDictType({ dictType: 'emailtype' })
  if (res.isSuccess) {
    const list = []
    res.data &&
      res.data.length &&
      res.data.map((v) => {
        list.push({
          label: v.dictName,
          value: v.dictCode
        })
      })
    mailTypeList.value = list
  }
}
function initData() {
  formState.value = {
    ...formState.value,
    ...props.mailEditInfo
  }
  getMailTypeList()
}

const MailEditVisible = ref(false)
onMounted(async () => {
  await nextTick()
  MailEditVisible.value = true
  initData()
})
const formRef = ref()
const loading = ref(false)
function confirmSave() {
  formRef.value
    .validate()
    .then(async () => {
      loading.value = true
      const param = {
        ...formState.value
      }
      let res = null
      try {
        res = isUpdate.value ? await modifyEmail(param) : await addEmail(param)
      } catch (err) {
        console.log('err', err)
      } finally {
        loading.value = false
      }
      if (res?.isSuccess) {
        message.success('当前修改已完成，预计次日可查询到。')
        handleCancel()
        emit('updateMailList')
      }
    })
    .catch((error) => {
      console.log('error', error)
    })
}
function handleCancel() {
  MailEditVisible.value = false
  emit('updateVisible', false)
}
</script>

<template>
  <DraggableModal
    v-model:open="MailEditVisible"
    :showSearchPageLink="showSearchPageLink"
    width="480px"
    :title="isUpdate ? $t('home.mailModal.editEmail') : $t('home.mailModal.addEmail')"
    @cancel="handleCancel"
  >
    <template #footer>
      <a-button @click="handleCancel">{{ $t('global.cancel') }}</a-button>
      <a-button type="primary" :loading="loading" @click="confirmSave">{{
        $t('global.save')
      }}</a-button>
    </template>
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item :label="$t('home.mailModal.mailTypeCode')" name="emailType">
        <a-select
          v-model:value="formState.emailType"
          :allowClear="true"
          :options="mailTypeList"
          :placeholder="$t('global.placeholderSelect', { value: 'type' })"
        >
        </a-select>
      </a-form-item>
      <a-form-item ref="email" :label="$t('home.mailModal.mailAddress')" name="email">
        <a-input
          v-model:value="formState.email"
          allow-clear
          :placeholder="$t('global.placeholderInput', { value: 'email' })"
        />
      </a-form-item>
      <!-- <a-form-item
        ref="emailStatus"
        :label="$t('home.mailModal.isEffectiveCode')"
        name="emailStatus"
      >
        <a-select
          v-model:value="formState.emailStatus"
          :allowClear="true"
          :options="flagOptions"
          :field-names="fieldNames"
          :placeholder="
            $t('global.placeholderSelect', { value: $t('home.mailModal.isEffectiveCode') })
          "
        >
        </a-select>
      </a-form-item> -->
      <!-- <a-form-item ref="autoEob" :label="$t('home.mailModal.autoEobCode')" name="autoEob">
        <a-select
          v-model:value="formState.autoEob"
          :allowClear="true"
          :options="flagOptions"
          :field-names="fieldNames"
          :placeholder="$t('global.placeholderSelect', { value: $t('home.mailModal.autoEob') })"
        >
        </a-select>
      </a-form-item>
      <a-form-item ref="ob" :label="$t('home.mailModal.isObCode')" name="ob">
        <a-select
          v-model:value="formState.ob"
          :allowClear="true"
          :options="flagOptions"
          :field-names="fieldNames"
          :placeholder="$t('global.placeholderSelect', { value: $t('home.mailModal.isObCode') })"
        >
        </a-select>
      </a-form-item>
      <a-form-item ref="auto80" :label="$t('home.mailModal.auto80Code')" name="auto80">
        <a-select
          v-model:value="formState.auto80"
          :allowClear="true"
          :options="flagOptions"
          :field-names="fieldNames"
          :placeholder="$t('global.placeholderSelect', { value: $t('home.mailModal.auto80Code') })"
        >
        </a-select>
      </a-form-item>
      <a-form-item
        ref="otherMailType"
        :label="$t('home.mailModal.otherMailTypeCode')"
        name="otherMailType"
      >
        <a-select
          v-model:value="formState.otherMailType"
          :allowClear="true"
          :options="flagOptions"
          :field-names="fieldNames"
          :placeholder="
            $t('global.placeholderSelect', { value: $t('home.mailModal.otherMailTypeCode') })
          "
        >
        </a-select>
      </a-form-item> -->
    </a-form>
  </DraggableModal>
</template>
<style lang="scss" scoped></style>
